<!--
 * @Author: Betty
 * @Date: 2020-11-08 20:34:23
 * @LastEditors: Betty
 * @LastEditTime: 2020-11-08 20:55:50
 * @Description: 下拉框组件的子组件，下拉选项组件
-->
<template>
  <!-- 每一个下拉选项是一个li，里面有可以填入的内容，也就是插槽 -->
  <li class="dropdown-option" :class="{'is-disabled': disabled}">
      <slot></slot>
  </li>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
export default defineComponent({
  name: '',
  props: {
    // 控制当前的下拉框选项是否可用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup () {
    return {}
  }
})
</script>

<style>
  /* 设置被禁用的样式，也就是文字变灰，并且点击了不可触发事件 */
  .dropdown-option.is-disabled * {
      pointer-events: none;
      color: #999;
      background-color: transparent;
  }
</style>
